<template>
  <div class="order">
    <div class="title">
      <span @click="$router.go(-1)"><van-icon name="arrow-left" /></span>
      <span style="font-weight: 600">我的订单</span>
      <span></span>
    </div>
    <van-tabs v-model:active="active">
      <van-tab title="全部">
        <div class="tab1">
          <p class="p1">0元课</p>
          <div class="pp1">
            <p>【听课送真题书】23管综全科240分+规划营（13日直播）</p>
            <span style="color: #e95451"> 已完成 </span>
          </div>
          <p style="color: #ddd">2021.12.01 ~2022.05.29</p>
          <div class="pp2">
            <div>
              实付款:
              <span style="font-weight: 700">￥0.00</span>
            </div>
            <div><button>马上学习</button><button>去评价</button></div>
          </div>
        </div>
      </van-tab>
      <van-tab title="待支付">内容2</van-tab>
      <van-tab title="待收讲义">内容3</van-tab>
      <van-tab title="已完成">内容4</van-tab>
      <van-tab title="已取消">内容4</van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
</script>
<style lang="scss" scoped>
.order {
  font-size: 20px;
  width: 100%;
}
.title {
  background: #fff;
  display: flex;
  padding: 19px;

  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  margin-bottom: 20px;
}
.tab1 {
  font-size: 15px;
  padding: 20px 10px;
  margin: 10px;
  margin-top: 20px;
  background-color: #fafafa;
  /* 阴影向右偏移10px、向下偏移10px、模糊距离为20px、阴影尺寸为10px、颜色为pink*/
  box-shadow: 10px 10px 20px 10px #ccc;
  border-radius: 40px 20px 20px 20px;
  padding-bottom: 10px;
  p {
    margin: 0;
  }
  .p1 {
    background-image: url(../assets/bgi.png);
    background-repeat: no-repeat;
    width: 120px;
    color: #fff;
    text-align: center;
  }
  .pp1 {
    display: flex;
    align-items: center;
    p {
      width: 620px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .pp2 {
    display: flex;
    margin-top: 30px;
    justify-content: space-between;
    button {
      border: 0;
      padding: 8px 18px;
      margin-right: 5px;
      background-color: #f15a24;
      border-radius: 25px;
      color: #fff;
    }
  }
}
</style>